import { bookUserDelete, bookUserList } from "@/services/userProfile";
import { ButtonGroup } from "@/utils/CommonComponent";
import { Avatar, Icon, Input, List, Modal, Pagination, Skeleton, message } from "antd";
import React from "react";
import AuthorizationAddModal from '@/pages/Account/authManage/authorizationAddModal';
import tableDataCheck from "@/utils/isBackPrevPage";
import { getUserAuthList, removeUserAuth } from "@/services/user";

class AuthUser extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      total:0,
      loading:false,
      list:[],
      search:"",
      queryData: {
        current: 1,
        size: 10,
        search: "",
        source: 2,
        targetId: props.docLibraryId,
      },
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { current,size,search } = this.state;
      const { docLibraryId,authType } = this.props;
      const res = await getUserAuthList({
        current,
        size,
        search,
        source:2,
        targetId:docLibraryId,
        authType
      })
      this.setState({
        list:res.records,
        total:res.total,
        loading:false
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({
      current,
      size
    },() => {
      this.getList()
    })
  }

  openAddModal = row => {
    this.AuthorizationAddModal.initData(row)
  }

  deleteUser = async id => {
    const that = this;
    Modal.confirm({
      title: '确定要删除吗?',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        const res = await removeUserAuth({id,source:2})
        message.info(res.message)
        const { list,current,size } = that.state;
        const newCurrent = tableDataCheck(list, current)
        that.doSearch(newCurrent,size)
      },
      onCancel() { },
    })
    
  }

  render(){
    const { current,size,list,total,loading,search,queryData } = this.state;
    const { docLibraryId,authType } = this.props;
    queryData.authType = authType
    return (
      <div style={{width:'70%'}}>
        <div className="topOptionBox" style={{marginTop:24}}>
          <div className="topOptionBox-left">
            <Input.Search 
              value={search} 
              onChange={e => this.setState({search:e.target.value})} 
              onSearch={() => this.doSearch(1,size)} 
              placeholder="搜索已有成员"
              style={{width:200}}
            />
          </div>
          <div className="topOptionBox-right">
            <ButtonGroup 
              title="添加成员"
              group="add"
              handleClick={() => this.openAddModal()}
              style={{marginRight:0}}
            />
          </div>
        </div>
        

        <List 
          loading={loading}
          itemLayout="horizontal"
          dataSource={list}
          renderItem={item => (
            <List.Item
              actions={[<Icon type="close" style={{color:"#FF4D4F",cursor:"pointer"}} onClick={() => this.deleteUser(item.id)} />]}
            >
              <Skeleton avatar title={false} loading={loading} active>
                <List.Item.Meta
                  avatar={
                    item.type == 1 ? <Avatar src="../../../newUI/type-user.png" /> :
                    <Avatar src="../../../newUI/group.png" />
                  }
                  title={item.name ? item.name : item.deptName}
                  description={item.deptName}
                />
              </Skeleton>
            </List.Item>
          )}
        />

        {parseInt(total) > 10 ? (<Pagination
          total={total}
          current={current}
          onChange={this.doSearch}
          showQuickJumper={true}
          style={{ marginTop: 20, textAlign: 'center' }}
        />):''}

        <AuthorizationAddModal 
          onRef={ref => this.AuthorizationAddModal = ref} 
          authId={''} 
          getList={() => this.doSearch(1,size)}
          pageSource="document"
          docLibraryId={docLibraryId}
          queryAuthData={queryData} 
        />
      </div>
    )
  }
}

export default AuthUser